<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 350px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <h2>vue 读码率统计图</h2>
    <div id="chart_Bcrexample"></div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    data() {
      return {
        // 显示搜索条件
        showSearch: true,
         // 日期范围
        dateRange: [],
        queryParams:{}
      }
    },
    mounted() {
      let this_ = this;
      let myChart = echarts.init(document.getElementById('chart_Bcrexample'));
      let option = {
        color: ['#00CC33'],
        tooltip : {
          trigger: 'axis',
          formatter: '{b}<br />{a0}: {c0}%<br />',
          axisPointer : {
            type : 'shadow'
          }
        },
        xAxis : [
          {          
            name:'百分比（%）',
            type : 'value'
          }
        ],
        yAxis : [
          {
            name:'BCR编号',
            type : 'category',
            data : ['BCR101','BCR102','BCR103','BCR104','BCR105','BCR106','BCR107','BCR108','BCR109'],
          }
        ],
        series : [
          {
            name:'读码率',
            type:'bar',
            barWidth: '60%',
            label: {
              normal: {
                  show: true,
                  position: 'insideRight',
                  formatter: '{c}%'
              }
            },
            data:[88,66,44,58,100,86,90,98,35]
          }
        ]
      };
      myChart.setOption(option);
 
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize',function() {myChart.resize()});
    },
    methods: {
     /** 查询跟踪日志列表 */
      getList() {
          this.loading = true;
              listBcrRead(this.addDateRange(this.queryParams, this.dateRange)).then(
          response => {       
          this.BcrReadList = response.rows;
          this.total = response.total;
          this.loading = false;
          });
      },
      /** 搜索按钮操作 */
      handleQuery() {
          // this.queryParams.pageNum = 1;
          this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
          this.dateRange = [];
          this.resetForm("queryForm");
          this.handleQuery();
      },
    },
    watch: {},
    created() {
 
    }
  }
</script>

<style scoped>
  h2{
    text-align: center;
    padding: 0px;
    font-size: 18px;
  }
  #chart_Bcrexample{
    width: 100%;
    height: 60vh;
    /* border: 1px solid	#C0C0C0; */
    margin: 0 auto;
  }
</style>

